<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-config">
		<view class="container">
			<!-- navbar -->
			<view class="navbar">
				<view class="goBack" @click.stop="jumpTo('/pages/login/index')">
					<i class="t-icon t-icon-fanhui"></i>
				</view>
			</view>
			<view class="uni-list">
				<uni-data-checkbox v-model="selectType" :localdata="types"></uni-data-checkbox>
			</view>
			<form class="cl">
				<!-- ip -->
				<view class="login-form-item" v-if="selectType === 'http'">
					<i class="t-icon t-icon-IP"></i>
					<u-input v-model="ip" :placeholder="$t('config.placeholderIP')" maxlength="30">
					</u-input>
				</view>
				<!-- 端口 -->
				<view class="login-form-item" v-if="selectType === 'http'">
					<i class="t-icon t-icon-duankou"></i>
					<u-input v-model="port" type="port" :placeholder="$t('config.placeholderPort')" maxlength="16">
					</u-input>
				</view>

				<view class="select-form" v-if="selectType === 'https'">
					<uni-data-select
						v-model="ip"
						:localdata="httpsList"
						@change="change"
						:clear="false"
						:placeholder="$t('config.placeholderSelectPort')"
					></uni-data-select>
				</view>

				<u-button type="primary" @click="save" :text="$t('common.sava')"></u-button>
			</form>
		</view>
	</view>
</template>
<script>
	import { isEmpty } from '@/utils/verify.js'
	import storage from '@/utils/storage.js'
	export default {
		data() {
			return {
				ip: storage.get('environment').ip || '', // 192.168.0.207
				port: storage.get('environment').port || '', // 9095
				types: [
					{ text: 'http', value: 'http' },
					{ text: 'https', value: 'https' },
				],
				selectType: storage.get('environment').type || 'https',
				httpsList: [
					{ text: 'www.aliothcloud.com', value: 'www.aliothcloud.com' },
					{ text: 'en.aliothcloud.com', value: 'en.aliothcloud.com' },
				]
			};
		},
		onLoad() {

		},
		created() {
			const envConfig = storage.get('environment')
			const {type ,ip, port } = envConfig
			if (type === 'http' && ip) {
				this.ip = ip || ''
				this.port = port || ''
			}
			if (type === 'https') {
				this.ip = ip || ''
				this.port = ''
			}
		},
		mounted() {
	
 		},
		watch: {
			selectType: function() {
				console.log();
				this.ip = undefined
				this.port = undefined
			},
			immediate: false
		}, 
		methods: {
			// 验证表单内容
			validItem() {
				const app = this
				console.log(app.ip, 'app.ip');
				if (isEmpty(app.ip)) {
					// uni.$u.toast(this.$t('config.placeholderIP'))
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('config.placeholderIP')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					});
					return false
				}
				// if (isEmpty(app.port)) {
				// 	uni.$u.toast(this.$t('config.placeholderPort'))
				// 	return false
				// }
				return true
			},
			// 保存
			save() {
				const app = this
				let valid = app.validItem();
				if (valid) {
					storage.set('environment', { ip: this.ip, port: this.port, type: this.selectType })
					// uni.$u.toast(this.$t('tip.tipSave'))
					plus.nativeUI.toast(`<p style=\"font-size: 28px\">${this.$t('tip.tipSave')}</p>`,{
						type: "richtext",
						duration: "long",
						verticalAlign: "middle"
					});
				}
			},
			// http/https 选择
			radioChange(e) {
				console.log(e, '~~~~');
				// this.selectType = e.target.value;
			},
			change(e) {
				console.log(e, '~~~~------');
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import 'index.scss';

	.select-form {
		margin-top: 32rpx;
		font-size: 30rpx;
	}
</style>
